<template>
  <!--提交需预约订单页面-->
  <div class="tijiao">
    <wv-panel class="header">
      <wv-media-box :thumb="goods.coverImg | imgPathFilter" :title="goods.goodsName":description="goods.vipPrice+'元'" v-if="isOld"></wv-media-box>
      <wv-media-box :thumb="goods.coverImg | imgPathFilter" :title="goods.goodsName":description="goods.goodsPrice+'元'" v-else></wv-media-box>

      <span class="num">×{{delayrisk.insurantNumber}}</span>
    </wv-panel>
    <div class="divider"></div>
    <wv-group>
      <wv-cell title="总计" :value="totalMoney + '元'" class="total"/>
    </wv-group>
    <div class="divider"></div>
    <p class="e96674">请核实以下信息并支付</p>
    <wv-group class="mymsg">
      <wv-cell title="被保险人总数" :value="delayrisk.insurantNumber"></wv-cell>
      <wv-cell title="其中未成年人数" :value="delayrisk.minorNumber"></wv-cell>
      <wv-cell title="旅行开始日期" :value="delayrisk.startTime"></wv-cell>
      <wv-cell title="旅行结束日期" :value="delayrisk.endTime"></wv-cell>
      <wv-cell title="联系电话" :value="delayrisk.phone"></wv-cell>
    </wv-group>
    <div class="other">
      <div v-for="(item,index) in insurantData" v-if="index==0">
        <p>同行人员{{index+1}}</p>
        <wv-group class="mymsg">
          <wv-cell title="姓名" :value="item.userName"></wv-cell>
          <wv-cell title="证件类型" v-if="item.identityType==1" value="身份证"></wv-cell>
          <wv-cell title="证件类型" v-if="item.identityType==2" value="护照"></wv-cell>
          <wv-cell title="证件类型" v-if="item.identityType==3" value="港澳台"></wv-cell>
          <wv-cell title="证件类型" v-if="item.identityType==4" value="台胞证"></wv-cell>
          <wv-cell title="证件号" :value="item.identityNo"></wv-cell>
        </wv-group>
      </div>
      <div v-show="isvisible" class="content" v-for="(item,index) in insurantData" v-if="index>0">
        <p>同行人员2</p>
        <wv-group class="mymsg">
          <wv-cell title="姓名" :value="item.userName"></wv-cell>
          <wv-cell title="证件类型" v-if="item.identityType==1" value="身份证"></wv-cell>
          <wv-cell title="证件类型" v-if="item.identityType==2" value="护照"></wv-cell>
          <wv-cell title="证件类型" v-if="item.identityType==3" value="港澳台"></wv-cell>
          <wv-cell title="证件类型" v-if="item.identityType==4" value="台胞证"></wv-cell>
          <wv-cell title="证件号" :value="item.identityNo"></wv-cell>
        </wv-group>
      </div>
      <p class="shouqi last" v-show="!isvisible" @click="isvisible=true"><img src="../../../assets/xiala.png" alt="">
        展开更多 </p>
      <p class="shouqi last" v-show="isvisible" @click="isvisible=false"><img src="../../../assets/shouqi.png" alt="">
        收起更多 </p>
    </div>
    <offer @confirm="offer" :goodsList="goodsList" :resultprice="totalMoney" :delayrisk="delayrisk"
           :insurantData="insurantData" :buySource="1"></offer>
  </div>
</template>

<script type="text/ecmascript-6">
  import offer from '../../offertemplate/offertemplate'
  import {getGoodDetail} from '../../../../test/unit/http'

  export default {
    name: 'dingdan',
    props: {},
    data() {
      return {
        src: require('../../../assets/guibin.png'),
        isvisible: false,
        delayrisk: {},
        insurantData: [],
        goods: {},
        goodsList: [],
        resultprice: '',
        isOld: false
      };
    },
    methods: {
      offer() {
        this.$router.push({path: '/yuyuesuccess'})
      },
      getGoodDetail(params) {
        let delayrisk = JSON.parse(this.$route.query.delayriskInfo);
        let insurantData = JSON.parse(this.$route.query.insurantDataInfo);
        this.delayrisk = delayrisk;
        this.insurantData = insurantData;
        getGoodDetail(params).then(res => {
          console.log(res);
          if (res.code == 100) {
            this.isOld = res.object.isOld;
            this.goods = res.object.goods;
            this.goods['goodsNum'] = this.insurantData.length;
            this.goods['unitPrice'] = this.goods.goodsPrice;
            if(this.isOld){
              this.goods['unitPrice'] = this.goods.vipPrice;
            }
            this.goods['orderType'] = 4;
            this.goodsList.push(this.goods);
          }
        })
      }
    },
    created() {
      let goodsId=this.$route.query.goodsId;
      this.getGoodDetail({goodsId:goodsId});
    },
    computed: {
      totalMoney: function () {
        let price= this.goods.goodsPrice * this.delayrisk.insurantNumber;
        if(this.isOld){
          price=this.goods.vipPrice * this.delayrisk.insurantNumber;
        }
        return price;
      }
    },
    components: {
      offer
    }
  }
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  .divider {
    height: 10px;
    background-color: #eee;
  }

  .header {
    position: relative;

    .num {
      position: absolute;
      right: 10px;
      bottom: 10px;
      font-size: 15px;
      color: #666;
    }
  }

  .e96674 {
    color: #e96674;
    padding-top: 10px;
  }

  .other {
    padding-top: 20px;

    p {
      color: #111;
    }

    .content p {
      padding-top: 20px;
    }
  }

  .shouqi {
    margin-top: 10px;
  }

  .tijiao {
    margin-bottom: 60px;
  }
</style>
